<template>
  <!-- 列表项 -->
  <v-hover v-slot="{ hover }">
    <v-card flat :class="hover ? 'grey lighten-5' : 'white'">
      <v-row no-gutters>
        <v-col class="col-10">
          <v-container fill-height fluid style="padding: 0">
            <!-- 头像 -->
            <router-link
              v-if="creator"
              :to="{ name: 'User', params: { username: creator.username } }"
              ><v-avatar class="mr-3" size="43">
                <img
                  :src="creator.avatar"
                  :alt="creator.full_name"
                /> </v-avatar
            ></router-link>
            <!-- 活动信息 -->
            <div class="ml-1" style="display: inline-block">
              <div>
                <span :class="style_type" class="act-tag"
                  >#{{ act.typ_e }}</span
                >
                <a class="ml-4" id="title" @click="gotoActivitiy">{{
                  act.title
                }}</a>
              </div>
              <div class="act-info mt-2">
                <router-link
                  v-if="creator"
                  :to="{ name: 'User', params: { username: creator.username } }"
                  >{{ creator.full_name }}</router-link
                >
                • 创建于
                {{ act.created_at.slice(0, 10) }}
                {{ act.created_at.slice(11, 16) }}
              </div>
            </div>
          </v-container>
        </v-col>
        <v-col style="font-size: 0.9rem">
          <!-- 活动人数 -->
          <v-container fill-height fluid style="padding: 0">
            <div>
              <v-chip class="ml-2" :color="color" dark
                >人数: {{ act.currents }}/{{ act.sum }}</v-chip
              >
            </div>
          </v-container>
        </v-col>
      </v-row>
    </v-card>
  </v-hover>
</template>

<script>
import axios from "axios";

export default {
  name: "ActivityItem",
  props: ["act"],
  data() {
    return {
      creator: null,
      style_type: "other",
    };
  },
  computed: {
    color() {
      return this.percentageToHsl(this.act.currents / this.act.sum, 120, 0);
    },
  },
  methods: {
    // 计算HSL颜色
    percentageToHsl(percentage, hue0, hue1) {
      var hue = percentage * (hue1 - hue0) + hue0;
      return "hsl(" + hue + ", 45%, 45%)";
    },
    // 转到用户信息页
    goto_profile(username) {
      this.$router.push("/users/" + username);
    },
    // 获得用户信息
    async get_userinfo(id) {
      await axios.get("user_by_id/" + id).then((res) => {
        this.creator = res.data.user;
      });
    },
    // 不同类型应用不同风格
    getStyleOfType() {
      if (this.act.typ_e === "运动") this.style_type = "sport";
      else if (this.act.typ_e === "出行") this.style_type = "trip";
      else this.style_type = "other";
    },
    // 转到活动详情页
    gotoActivitiy() {
      this.$router.push("/activities/" + this.act.id);
    },
  },
  watch: {
    $route() {
      this.get_userinfo(this.act.creator);
    },
  },
  mounted() {
    this.get_userinfo(this.act.creator);
    this.getStyleOfType();
  },
};
</script>

<style scoped>
#title {
  display: inline-block;
}

.trip {
  color: orange;
}

.sport {
  color: green;
}

.other {
  color: grey;
}
.act-info {
  color: grey;
  font-size: 0.8rem;
}
.author-link {
  text-decoration: none;
  border-bottom: 1px solid grey;
}
.act-tag {
  font-size: 0.9rem;
  font-weight: 900;
}
</style>